<template>
  <el-button
    :type="elType"
    :loading="loading"
    :disabled="disabled"
    :plain="plain"
    :round="round"
    :size="size"
    @click="$emit('click', $event)"
  >
    <el-icon v-if="iconComponent" style="margin-right: 6px">
      <component :is="iconComponent" />
    </el-icon>
    <slot>{{ label }}</slot>
  </el-button>
</template>

<script setup>
import { computed } from 'vue'
import { Upload, Download, Search as SearchIcon, Delete as DeleteIcon, Plus } from '@element-plus/icons-vue'

const props = defineProps({
  variant: {
    type: String,
    default: 'search', // import | export | search | delete | add
  },
  loading: Boolean,
  disabled: Boolean,
  plain: Boolean,
  round: Boolean,
  size: {
    type: String,
    default: 'default', // large | default | small
  },
})

const elType = computed(() => {
  switch (props.variant) {
    case 'add':
      return 'primary'
    case 'delete':
      return 'danger'
    case 'export':
      return 'warning'
    case 'import':
      return 'info'
    case 'search':
    default:
      return 'primary'
  }
})

const label = computed(() => {
  switch (props.variant) {
    case 'add':
      return '新增'
    case 'delete':
      return '删除'
    case 'export':
      return '导出'
    case 'import':
      return '导入'
    case 'search':
    default:
      return '查询'
  }
})

const iconComponent = computed(() => {
  switch (props.variant) {
    case 'add':
      return Plus
    case 'delete':
      return DeleteIcon
    case 'export':
      return Download
    case 'import':
      return Upload
    case 'search':
    default:
      return SearchIcon
  }
})
</script>

<style scoped>
/* Keep visual consistency with theme */
:deep(.el-button.is-plain) {
  border-color: rgba(99, 102, 241, 0.35);
  color: #334155;
}
</style> 